<template>
	<div>
		<div class="head">
			<div @click="$router.push({path: '/My'})" class="return"></div>
		</div>
		<div class="overlay">
			<div class="overlay-content">
				<div class="invite" align="center">
					<div class="invite_logo">
						<div class="logo">
							<img src="../assets/images/logo.png" width="42%" />
							<!-- <p style="padding-top:10px;">XIBRUSH</p> -->
						</div>
					</div>
					<div class="invite_font">
						<span style="color: #f8ce63;">欢迎您加入 </br>AIDT</span>
					</div>
					<div class="invite_code">
						<div class="code_code"><span>我的邀请码</span><span style="margin-left: 10px;" v-text="list.uuid">1234567</span></div>
						<div class="code_img">
							<img :src="list.imgUrl" width="80%">
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	let _this;
	import { safety } from './../utils/api';
	export default {
		name: 'Invite2',
		data() {
			return {
				list: []
			}
		},
		beforeCreate() {
			_this = this;
		},
		mounted() {
			this.getList();
		},
		methods: {
			getList() {
				safety.getSharing().then(res => {
					this.list = res.data;
				})
			}
		}
	}
</script>

<style lang="less" scoped="scoped">
	.head {
		background: transparent;
	}
	
	.head~.overlay {
		top: 0;
	}
	
	.overlay {
		background: url(../assets/images/invite-1.png) no-repeat;
		background-size: 100% 100%;
	}
	
	.invite {
		.invite_logo {
			.logo {
				margin-top: 10%;
				font-size: 22px;
				p {
					position: relative;
					top: -10px;
				}
			}
		}
		.invite_font {
			position: fixed;
			font-size: .34rem;
			top: 55%;
			left: 50%;
			width: 50%;
			height: 50%;
			-webkit-transform: translateX(-50%) translateY(-50%);
		}
		.invite_code {
			width: 55%;
			position: absolute;
			top: 62%;
			left: 51%;
			transform: translate(-50%, -50%);
			.code_code {
				width: 90%;
				padding: 5px 0px;
				box-shadow: 10px 10px 10px #000;
				background: #ae7b21;
				border-radius: 5px;
				margin-bottom: 10px;
				margin-bottom: 40px
				/*background: linear-gradient(#79530f, #ae7b21,#79530f);*/
			}
		}
	}
</style>